<template>
  <div class="positionManage-form">
    <MainHead
      :refresh="false"
      :title="
        $route.meta.type === 'add'
          ? '新建讲师'
          : $route.meta.type === 'edit'
          ? '编辑讲师'
          : '查看讲师'
      "
    />
    <el-card class="main-card" style="margin-top: 10px" shadow="never">
      <el-form ref="form" :model="form" label-width="auto">
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="讲师名："
              prop="lecturerName"
              :rules="[
                { required: true, message: '请输入讲师名', trigger: 'blur' },
              ]"
            >
              <el-input
                style="width: 350px"
                v-model="form.lecturerName"
                placeholder="请输入讲师名"
                :maxlength="40"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="业务类型："
              prop="positionType"
              :rules="[
                { required: true, message: '请选择业务类型', trigger: 'blur' },
              ]"
            >
              <el-select
                style="width: 350px"
                v-model="form.positionType"
                placeholder="请选择业务类型"
              >
                <el-option label="政治理论教育" :value="1"> </el-option>
                <el-option label="党性教育" :value="2"> </el-option>
                <el-option label="党的宗旨教育" :value="3"> </el-option>
                <el-option label="知识技能教育" :value="4"> </el-option>
                <el-option label="革命传统教育" :value="5"> </el-option>
                <el-option label="政治教育和政治训练" :value="6"> </el-option>
                <el-option label="形势政策教育" :value="7"> </el-option>
                <el-option label="理想信念教育" :value="8"> </el-option>
                <el-option label="政治理论学习" :value="9"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="个人简介："
              prop="synopsis"
              :rules="[
                {
                  required: true,
                  message: '请输入个人简介',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                class="textarea"
                style="width: 350px"
                v-model="form.synopsis"
                placeholder="请输入个人简介"
                :maxlength="1000"
                type="textarea"
                :rows="6"
                resize="none"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="联系方式："
              prop="contact"
              :rules="[
                { required: true, message: '请输入联系方式', trigger: 'blur' },
              ]"
            >
              <el-input
                style="width: 350px"
                v-model="form.contact"
                placeholder="请输入联系方式"
                :maxlength="200"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="讲师照片："
              prop="lecturerPic"
              :rules="[
                { required: true, message: '请上传讲师照片', trigger: 'blur' },
              ]"
            >
              <Upload v-model="form.lecturerPic" />
            </el-form-item>
            <el-form-item
              label="职业身份："
              prop="professionalIdentity"
              :rules="[
                {
                  required: true,
                  message: '请输入职业身份',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                style="width: 350px"
                v-model="form.professionalIdentity"
                placeholder="请输入职业身份"
                :maxlength="40"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="建库单位："
              prop="establishmentUnit"
              :rules="[
                {
                  required: true,
                  message: '请选择建库单位',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                style="width: 350px"
                v-model="form.establishmentUnit"
                placeholder="请选择建库单位"
              >
                <el-option label="南湖区" value="南湖区"> </el-option>
                <el-option label="秀洲区" value="秀洲区"> </el-option>
                <el-option label="嘉善县" value="嘉善县"> </el-option>
                <el-option label="平湖市" value="平湖市"> </el-option>
                <el-option label="海盐县" value="海盐县"> </el-option>
                <el-option label="海宁市" value="海宁市"> </el-option>
                <el-option label="桐乡市" value="桐乡市"> </el-option>
                <el-option
                  label="嘉兴经济技术开发区"
                  value="嘉兴经济技术开发区"
                >
                </el-option>
                <el-option label="嘉兴港区" value="嘉兴港区"> </el-option>
                <el-option label="市直机关工委" value="市直机关工委">
                </el-option>
                <el-option label="教育局党委" value="教育局党委"> </el-option>
                <el-option label="交通局党委" value="交通局党委"> </el-option>
                <el-option label="建设局党委" value="建设局党委"> </el-option>
                <el-option label="卫健委" value="卫健委"> </el-option>
                <el-option label="国资委" value="国资委"> </el-option>
                <el-option label="嘉兴学院党委" value="嘉兴学院党委">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item
              label="特色宣讲团："
              prop="propagandaGroup"
              :rules="[
                {
                  required: true,
                  message: '请选择特色宣讲团',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                style="width: 350px"
                v-model="form.propagandaGroup"
                placeholder="请选择特色宣讲团"
                multiple
                @change="propagandaGroupChange"
              >
                <el-option label="无" value=""> </el-option>
                <el-option label="革命红色宣讲组" value="革命红色宣讲组">
                </el-option>
                <el-option label="经济蓝色宣讲组" value="经济蓝色宣讲组">
                </el-option>
                <el-option label="生活金色宣讲组" value="生活金色宣讲组">
                </el-option>
                <el-option label="文化青色宣讲组" value="文化青色宣讲组">
                </el-option>
                <el-option label="生态绿色宣讲组" value="生态绿色宣讲组">
                </el-option>
                <el-option label="红船精神宣讲组" value="红船精神宣讲组">
                </el-option>
                <el-option label="红船银晖宣讲组" value="红船银晖宣讲组">
                </el-option>
                <el-option label="红船青年宣讲组" value="红船青年宣讲组">
                </el-option>
                <el-option label="红船女儿宣讲组" value="红船女儿宣讲组">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="研究领域或专业专长："
              prop="researchField"
              :rules="[
                {
                  required: true,
                  message: '请输入研究领域或专业专长',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                style="width: 350px"
                v-model="form.researchField"
                placeholder="请输入研究领域或专业专长"
                :maxlength="200"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="main-card" style="margin-top: 10px" shadow="never">
      <div class="title" style="margin-top: 0; margin-bottom: 20px">
        <h2>荣誉管理</h2>
        <el-button
          style="margin-left: 15px"
          type="primary"
          @click="honorVisible = true"
          >新增</el-button
        >
      </div>
      <el-table
        :data="honorPoList"
        style="width: 100%"
        class="page-table"
        max-height="600"
      >
        <el-table-column prop="honorName" label="荣誉名称"> </el-table-column>
        <el-table-column prop="honorHierarchy" label="荣誉层级">
          <template slot-scope="{ row }">
            {{ row.honorHierarchy | honorHierarchy }}
          </template>
        </el-table-column>
        <el-table-column prop="awardingUnit" label="授奖单位">
        </el-table-column>
        <el-table-column prop="timeGrant" label="授予时间"> </el-table-column>
        <el-table-column label="操作" width="110">
          <template slot-scope="scope">
            <el-button
              style="padding: 0"
              type="text"
              @click="editHonor(scope.row)"
              >维护</el-button
            >
            <el-button
              style="padding: 0"
              type="text"
              @click="delHonor(scope.$index)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="footer-btn">
        <el-button
          style="color: #d03539; border-color: #d03539; padding: 12px 27px"
          @click="$router.push('/app-vue/school/teacher/teacher-manageme')"
          >返回</el-button
        >
        <el-button style="padding: 12px 27px" type="primary" @click="save"
          >提交</el-button
        >
      </div>

      <el-dialog
        title="新增荣誉"
        :visible="honorVisible"
        width="30%"
        :before-close="handleClose"
        class="main-dialog"
      >
        <div style="padding: 10px 24px">
          <el-form
            ref="honorForm"
            label-position="top"
            label-width="80px"
            :model="honorForm"
          >
            <el-form-item
              label="年份"
              prop="timeGrant"
              :rules="[{ required: true, message: '此项不能为空' }]"
            >
              <el-date-picker
                style="width: 100%"
                v-model="honorForm.timeGrant"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择年份"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label="级别"
              prop="honorHierarchy"
              :rules="[{ required: true, message: '此项不能为空' }]"
            >
              <el-select
                style="width: 100%"
                v-model="honorForm.honorHierarchy"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in honorLeves"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="荣誉类型"
              prop="honorType"
              :rules="[{ required: true, message: '此项不能为空' }]"
            >
              <el-select
                style="width: 100%"
                v-model="honorForm.honorType"
                placeholder="请选择"
              >
                <el-option label="阵地荣誉" :value="1"> </el-option>
                <el-option label="师资荣誉" :value="2"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="荣誉"
              prop="honorName"
              :rules="[{ required: true, message: '此项不能为空' }]"
            >
              <el-input v-model="honorForm.honorName"></el-input>
            </el-form-item>
            <el-form-item
              label="授予单位"
              prop="awardingUnit"
              :rules="[{ required: true, message: '此项不能为空' }]"
            >
              <el-input v-model="honorForm.awardingUnit"></el-input>
            </el-form-item>
            <!-- <el-form-item prop="enclosurePath">
              <Upload
                tip="支持扩展名：.rar .zip .doc .docx .pdf .jpg"
                type="btn-file"
                v-model="honorForm.enclosurePath"
              />
            </el-form-item> -->
          </el-form>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button type="primary" @click="saveForm(1)">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { deepCopy } from "@/utils/deepCopy";
export default {
  data() {
    return {
      form: {},
      honorPoList: [],
      honorForm: {},
      honorVisible: false,
      honorLeves: [
        {
          label: "国家级",
          value: 1,
        },
        {
          label: "市级",
          value: 2,
        },
        {
          label: "县级",
          value: 3,
        },
      ],
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
    routerType() {
      return this.$route.meta.type;
    },
  },
  created() {
    if (this.routerType !== "add") {
      this.getPageList();
      this.getHonorList();
    }
  },
  methods: {
    getPageList() {
      this.$Ajax(
        "/chuxin/admin/lecturer/getById",
        "get",
        {
          id: this.id,
        },
        (res) => {
          const data = res.data;
          data.lecturerPic = {
            url: process.env.VUE_APP_FILE_URL + data.lecturerPic,
            name: data.lecturerPic,
            data: data.lecturerPic,
          };
          data.propagandaGroup = data.propagandaGroup.split(",");
          this.form = res.data;
        }
      );
    },
    getHonorList() {
      this.$Ajax(
        "/chuxin/admin/lecturer/listByPositionId",
        "get",
        {
          lecturerId: this.id,
        },
        (res) => {
          const data = res.data;
          this.honorPoList = data;
          // this.honorPoList = data.map((item) => {
          //   const path = item.enclosurePath || "";
          //   item.enclosurePath = {
          //     url: process.env.VUE_APP_FILE_URL + path,
          //     name: path,
          //     data: path,
          //   };
          //   return item;
          // });
        }
      );
    },
    propagandaGroupChange(val) {
      if (val.indexOf("") !== -1) {
        this.form.propagandaGroup = [""];
      }
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (!valid) return;
        const data = deepCopy(this.form);
        data.honorPoList = this.honorPoList;
        data.lecturerPic = data.lecturerPic.data || "";

        if (data.propagandaGroup) {
          data.propagandaGroup = this.form.propagandaGroup.join(",");
        }

        this.$Ajax(
          "/chuxin/admin/lecturer/add",
          "post",
          {
            ...data,
          },
          (res) => {
            this.$message.success(res.msg);
            this.$router.push("/app-vue/school/teacher/teacher-manageme");
          }
        );
      });
    },

    handleClose() {
      this.$refs.honorForm.resetFields();
      this.honorForm = {};
      this.honorVisible = false;
    },

    saveForm() {
      this.$refs.honorForm.validate((valid) => {
        if (!valid) return;
        const data = deepCopy(this.honorForm);
        // data.enclosurePath = data.enclosurePath.data || "";
        this.honorPoList.push(data);
        this.handleClose();
      });
    },

    delHonor(index) {
      this.$alert("<div>确定删除该荣誉吗？</div>", "提示", {
        type: "warning",
        dangerouslyUseHTMLString: true,
        showCancelButton: true,
      }).then(() => {
        this.honorPoList.splice(index, 1);
      });
    },

    editHonor(row) {
      const data = deepCopy(row);
      this.honorForm = data;
      this.honorVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.positionManage-form {
  .title {
    display: flex;
    // justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    h2 {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #1c1d1d;
      margin: 0;
      line-height: 40px;
    }
  }
  .footer-btn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
}
</style>
<style lang="scss">
.positionManage-form {
  .textarea {
    .el-textarea__inner {
      padding-bottom: 10px;
    }
  }
}
</style>
